<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>图书管理系统-购买记录</title>
	<!-- 引入Pacifico手写字体（Google Fonts） -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
	<!-- 引入图标库（优化操作按钮视觉） -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
	<style>
		/* 全局样式重置与基础设置 */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: 'Pacifico', cursive; /* 统一手写字体 */
		}

		body {
			/* 浅紫色背景：渐变+细纹理，营造清新感 */
			background-color: #F5F0FF;
			background-image:
				/* 浅紫网点阵：低透明度不干扰内容 */
					radial-gradient(rgba(139, 92, 246, 0.05) 1px, transparent 1px),
					linear-gradient(135deg, #F5F0FF 0%, #E6D9FF 100%);
			background-size: 20px 20px;
			min-height: 100vh;
			padding: 25px 0;
		}

		/* 头部容器：浅紫卡片+统一风格 */
		.header-container {
			width: 80%;
			max-width: 1200px;
			margin: 0 auto 35px;
			padding: 25px 0;
			position: relative;
			text-align: center;
			/* 浅紫半透卡片：增强层次感 */
			background-color: rgba(255, 255, 255, 0.7);
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(139, 92, 246, 0.08);
		}

		/* 标题样式：深紫文字+浅紫阴影 */
		.header-container h1 {
			color: #6D28D9;
			font-size: 34px;
			margin-bottom: 25px;
			position: relative;
			display: inline-block;
			letter-spacing: 1.5px;
			text-shadow: 0 0 6px rgba(139, 92, 246, 0.15);
		}

		/* 标题下方浅紫线条：点缀风格 */
		.header-container h1::after {
			content: "";
			position: absolute;
			bottom: -10px;
			left: 15%;
			width: 70%;
			height: 1px;
			background: linear-gradient(90deg, transparent, #C4B5FD, transparent);
		}

		/* 导航菜单：浅紫风格横向排列 */
		.nav-list {
			display: flex;
			justify-content: center;
			gap: 30px;
			margin-bottom: 30px;
			flex-wrap: wrap; /* 小屏幕自动换行 */
		}

		.nav-list li {
			list-style: none;
			float: none; /* 清除原浮动，改用flex布局 */
			margin: 5px 0;
		}

		.nav-list li a {
			text-decoration: none;
			color: #6D28D9;
			font-size: 18px;
			padding: 6px 15px;
			border-radius: 6px;
			transition: all 0.3s ease;
			position: relative;
			display: inline-flex;
			align-items: center;
			gap: 6px;
		}

		/* 导航链接 hover 效果：浅紫背景+下划线 */
		.nav-list li a::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 0;
			height: 1px;
			background-color: #8B5CF6;
			transition: width 0.3s ease;
		}

		.nav-list li a:hover {
			color: #8B5CF6;
			background-color: rgba(139, 92, 246, 0.08);
		}

		.nav-list li a:hover::after {
			width: 100%;
		}

		/* 清除浮动：适配原clear类 */
		.clear {
			clear: both;
			height: 0;
			overflow: hidden;
		}

		/* 搜索表单：浅紫风格优化 */
		.search-form {
			display: flex;
			justify-content: center;
			gap: 12px;
			margin-bottom: 10px;
			align-items: center;
		}

		.search-form input[type="text"] {
			width: 300px;
			height: 42px;
			padding: 0 18px;
			background-color: rgba(255, 255, 255, 0.9);
			border: 1px solid #C4B5FD;
			border-radius: 8px;
			color: #6D28D9;
			font-size: 16px;
			transition: all 0.3s ease;
			outline: none;
		}

		.search-form input[type="text"]:focus {
			border-color: #8B5CF6;
			box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.12);
			background-color: #fff;
		}

		.search-form input[type="text"]::placeholder {
			color: rgba(139, 92, 246, 0.5);
		}

		.search-form input[type="submit"] {
			height: 42px;
			padding: 0 22px;
			background: linear-gradient(90deg, #8B5CF6, #A78BFA);
			color: #fff;
			border: none;
			border-radius: 8px;
			font-size: 16px;
			cursor: pointer;
			transition: all 0.3s ease;
			box-shadow: 0 2px 4px rgba(139, 92, 246, 0.1);
		}

		.search-form input[type="submit"]:hover {
			background: linear-gradient(90deg, #A78BFA, #C4B5FD);
			transform: translateY(-2px);
			box-shadow: 0 4px 8px rgba(139, 92, 246, 0.15);
		}

		.search-form input[type="submit"]:active {
			transform: translateY(0);
			box-shadow: 0 2px 4px rgba(139, 92, 246, 0.1);
		}

		/* 订单表格：浅紫风格优化 */
		.order-table {
			border-collapse: collapse;
			width: 85%;
			max-width: 1100px;
			margin: 0 auto;
			background-color: rgba(255, 255, 255, 0.9);
			border-radius: 12px;
			box-shadow: 0 6px 16px rgba(139, 92, 246, 0.08);
			overflow: hidden; /* 裁剪边框圆角 */
		}

		.order-table th,
		.order-table td {
			padding: 14px 18px;
			text-align: center;
			border-bottom: 1px solid #F0E7FF;
			color: #6D28D9;
			font-size: 16px;
		}

		/* 表头样式：深紫背景+白色文字 */
		.order-table th {
			background: linear-gradient(90deg, #8B5CF6, #A78BFA);
			color: #fff;
			font-weight: normal;
			letter-spacing: 1.2px;
			border-bottom: none;
		}

		/* 表格行：奇偶行区分+hover效果 */
		.order-table tr:nth-child(even) {
			background-color: rgba(139, 92, 246, 0.03);
		}

		.order-table tr:hover {
			background-color: rgba(139, 92, 246, 0.06);
			transition: background-color 0.3s ease;
		}

		/* 最后一行清除边框 */
		.order-table tr:last-child td {
			border-bottom: none;
		}

		/* 评论链接：浅紫风格优化 */
		.order-table td a {
			text-decoration: none;
			color: #8B5CF6;
			font-size: 16px;
			padding: 4px 8px;
			border-radius: 6px;
			transition: all 0.3s ease;
			display: inline-flex;
			align-items: center;
			gap: 5px;
		}

		.order-table td a:hover {
			color: #6D28D9;
			background-color: rgba(139, 92, 246, 0.1);
			text-decoration: underline;
			text-underline-offset: 3px;
		}

		/* 空记录提示：浅紫风格 */
		.order-table .empty-tip {
			font-style: italic;
			color: rgba(139, 92, 246, 0.6);
			letter-spacing: 1.2px;
			padding: 40px 0;
			background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 10c-11.045 0-20 8.954-20 20s8.955 20 20 20 20-8.954 20-20-8.955-20-20-20zm0 36c-8.822 0-16-7.178-16-16 0-8.823 7.178-16 16-16s16 7.177 16 16c0 8.822-7.178 16-16 16z' fill='none' stroke='%23C4B5FD' stroke-width='1' stroke-opacity='0.2'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: center;
		}

		/* 响应式适配：小屏幕优化 */
		@media (max-width: 992px) {
			.header-container {
				width: 90%;
			}

			.search-form input[type="text"] {
				width: 250px;
			}

			.order-table {
				width: 92%;
			}

			.order-table th,
			.order-table td {
				padding: 12px 12px;
				font-size: 15px;
			}
		}

		@media (max-width: 768px) {
			.header-container {
				width: 95%;
				padding: 20px 15px;
			}

			.header-container h1 {
				font-size: 28px;
				margin-bottom: 20px;
			}

			.nav-list {
				gap: 15px;
				margin-bottom: 25px;
			}

			.nav-list li a {
				font-size: 16px;
				padding: 5px 10px;
			}

			.search-form {
				gap: 10px;
				flex-direction: column;
				align-items: stretch;
				padding: 0 15px;
			}

			.search-form input[type="text"] {
				width: 100%;
				height: 40px;
				font-size: 15px;
			}

			.search-form input[type="submit"] {
				width: 100%;
				height: 40px;
				font-size: 15px;
			}

			/* 移动端表格横向滚动 */
			.table-wrapper {
				width: 95%;
				margin: 0 auto;
				overflow-x: auto;
				padding-bottom: 15px;
			}

			.order-table {
				width: 600px; /* 固定宽度确保内容不挤压 */
				margin: 0;
			}

			.order-table th,
			.order-table td {
				padding: 10px 8px;
				font-size: 14px;
			}

			.order-table .empty-tip {
				padding: 30px 0;
			}
		}
	</style>
</head>
<body>
<!-- 头部容器：标题 + 导航 + 搜索 -->
<div class="header-container">
	<h1>图书管理系统-购买记录</h1>
	<ul class="nav-list">
		<li><a href="/book"><i class="fas fa-home"></i> 首页</a></li>
		<li><a href="/paybook"><i class="fas fa-history"></i> 购买记录</a></li>
		<li><a href="/users/logout"><i class="fas fa-sign-out-alt"></i> 安全退出</a></li>
	</ul>
	<div class="clear"></div>
	<form action="/paybook/oldlist" method="post" class="search-form">
		<input type="text" name="bookName" placeholder="请输入要查找的书名" />
		<input type="submit" value="查找" />
	</form>
</div>

<!-- 表格外层容器：适配移动端横向滚动 -->
<div class="table-wrapper">
	<!-- 订单表格 -->
	<table class="order-table">
		<tr>
			<th>订单号</th>
			<th>书名</th>
			<th>价格</th>
			<th>购买时间</th>
			<th>操作</th>
		</tr>
		#for(payBook : payBookList)
		<tr>
			<td>#(payBook.tradeno)</td>
			<td>#(payBook.body)</td>
			<td>¥#(payBook.total)</td> <!-- 补充货币符号，增强可读性 -->
			<td>#date(payBook.payTime,'yyyy-MM-dd HH-mm-SS')</td>
			<td><a href="bookcomm.html"><i class="fas fa-comment"></i> 评论</a></td>
		</tr>
		#else
		<tr>
			<td colspan="5" class="empty-tip">暂无购买记录</td>
		</tr>
		#end
	</table>
</div>
</body>
</html>